/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

//alert("grid");

Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '../js/extjs/ext-4.0.1/examples/ux');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.tip.QuickTipManager',
    'Ext.ux.LiveSearchGridPanel'
]);

//x-livesearch-match   clase css aplicado a los resultados de busqueda

Ext.onReady(function() {    
    Ext.QuickTips.init();
        
    // sample static data for the store


    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }        
    
   
    
    var store = Ext.create('Ext.data.Store', {
    id:'juezStore',
    autoLoad: false,
    fields:[{name:'idJuez',type: 'int'},
            {name: 'identifJuez', type:'string'}, 
            {name: 'nombresJuez', type:'string'}, 
            {name :'apellidosJuez', type:'string'},          
            {name: 'fechaNcmtoJuez', type:'string'}, 
            {name :'telJuez', type:'string'},
            {name:'e-mailJuez', type:'string'},            
            {name:'tipoJuez', type:'string'},            
            {name:'rhJuez', type:'string'},
            {name:'ciudadJuez'},
            {name: 'paisJuez', type:'int'},
            {name:'estadoJuez', type:'string'}],
        
    pageSize: 24, // items per page
    proxy: {
        type: 'ajax',
        url: 'juez/listar',  // url that will load data with respect to start and limit params        
        reader: {
            type: 'json',
            root: 'items',
            totalProperty: 'total'
            }
        },
        listeners:{load: function(){Ext.getCmp("formInfoJuez").getForm().loadRecord(store.getAt(0));}}
    });

store.load({        
    params:{
        start: 0,    
        limit: 2
    }
});
   
    // create the Grid, see Ext.
    var grid=Ext.create('Ext.ux.LiveSearchGridPanel', {
        region:'center',
        store: store,
        columnLines: true,
        resizable: true,
        id:"gridJueces",
        
        columns: [
            {
                text     : 'No. Identificación',
               // flex     : 1,
              width    : 150,
              // width: '20%',
                sortable : false, 
                dataIndex: 'identifJuez'
            },
            {
                text     : 'Nombres', 
               // width    : 75, 
                width    : 170,
                sortable : true, 
               // renderer : 'usMoney', 
                dataIndex: 'nombresJuez'
            },
            {
                text     : 'Apellidos', 
               // width    : 75, 
                width    : 170,
                sortable : true, 
                dataIndex: 'apellidosJuez'
               // renderer: change
            },
            {
                text     : 'Tipo Juez', 
                width    : 150, 
               // autoWidth: true,
                //sortable : true, 
                dataIndex: 'tipoJuez',
               // renderer: pctChange
            }
        ],
        
        
        height: '100%', //350,
        width: '100%', //600,
       // title: 'Live Search Grid',
//        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        },
        
        listeners:{itemclick: function(a,b,c,d)
			      {				  
				  var rec=store.getAt(d);                               
                                   Ext.getCmp("fieldsetCrudJuez").setTitle("Datos de Juez");
				  Ext.getCmp('formInfoJuez').getForm().loadRecord(rec);
                                 if( Ext.getCmp('formInfoJuez').getForm().findField('tipoJuez').getValue()=="Juez Silla"
                                    ||  Ext.getCmp('formInfoJuez').getForm().findField('tipoJuez').getValue()== "Anotador") 
                                     Ext.getCmp("butCambiarContrasJuez").show();
                                 else Ext.getCmp("butCambiarContrasJuez").hide();
			      }},
        dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: store,   // same store GridPanel is using
                    dock: 'bottom',
                    displayInfo: true
                }]
    });

    var panelTabCrudJuez= new Ext.panel.Panel({
	layout: 'border',
	//title: 'Gestionar Usuario',
	id:'panelTabCrudJuez',
        border: 0,
	width: '100%',
	height: '100%',
	items:[grid, formInfoJuez]

});

    Ext.getCmp('tabGestionJuez').add(panelTabCrudJuez);
    Ext.getCmp('panelContenido').setActiveTab(panelTabCrudJuez);
    Ext.getCmp('panelContenido').doLayout();
    Ext.getCmp('tabGestionJuez').doLayout();
    
   // Ext.getCmp('fotoImagen').getLoader().load({params:{idJug:3}});
  /*  pGridCrudJug.add(grid);
    pGridCrudJug.doLayout();*/
    
     
    
   
    
});
